<template>
	<view class="page-container">
		<!-- 2. 卖家信息 -->
		<view class="seller-info">
			<image class="avatar" :src="product?.seller?.sellerAvatar" mode="aspectFill"></image>
			<view class="seller-details">
				<view class="seller-name-tag">
					<text class="name">{{ product?.seller?.sellerName }}</text>
					<!-- <text class="tag-l2">鱼小铺 L2</text> -->
				</view>
				<!-- <text class="last-seen">3小时前来过 深圳</text> -->
			</view>
			<!-- <button v-show="!isMe" class="follow-btn" size="mini">+ 关注</button> -->
		</view>

		<!-- 3. 价格和人气 -->
		<view class="price-info">
			<view class="price-section">
				<text class="price-symbol">¥</text>
				<text class="price-value">{{ product?.price }}</text>
				<text class="shipping-pickup" v-show="product?.isFreeShipping == 1">包邮</text>
				<text class="shipping-pickup price-value" v-show="product?.isFreeShipping == 0">运费¥{{ product?.shippingFee }}</text>
				
				<text class="shipping-pickup divider" v-show="product?.isSelfPickup == 1">可自提</text>
			</view>
			<view class="engagement-stats">
			</view>
		</view>
		<!-- 5. 商品标题和描述 -->
		<view class="product-title-desc">
			<text class="title">{{ product?.title }}</text>
			<text class="description">{{ product?.description }}</text>
			<view class="product-images"> 

				<image v-for="(item, index) in product?.images" :key="index" class="product-image" :src="item" mode="aspectFill" @click="previewImage(index)"></image>
			</view>
		</view>

		<!-- 新增：评论区域 -->
		<view class="comments-section">
			<view class="comments-header">
				<text class="section-title">宝贝评价 ({{ comments.length }})</text>
				<!-- 可以加一个查看全部评论的按钮 -->
				<!-- <text class="see-all-comments" @click="viewAllComments">全部评论 ></text> -->
			</view>

			<!-- 评论列表 -->
			<view class="comment-list" v-if="comments.length > 0">
				<view class="comment-item" v-for="(comment, index) in comments" :key="comment.id || index">
					<image class="comment-avatar" :src="comment.userAvatar || '/static/avatar_placeholder.png'" mode="aspectFill"></image>
					<view class="comment-content">
						<view class="comment-user-info">
							<text class="comment-username">{{ comment.userName }}</text>
							<text class="comment-time">{{ formatCommentTime(comment.createDate) }}</text>
						</view>
						<text class="comment-text">{{ comment.content }}</text>
						<!-- 可以添加回复等功能 -->
					</view>
				</view>
			</view>
			<view class="no-comments" v-else>
				<text>暂无评价，快来抢沙发吧！</text>
			</view>

			<!-- 评论输入框 -->
			<view class="comment-input-area" v-if="userId"> <!-- 仅登录用户可评论 -->
				<input class="comment-input" type="text" v-model="newCommentText" placeholder="说点什么吧..." confirm-type="send" @confirm="submitComment"/>
				<button class="submit-comment-btn" @click="submitComment" :disabled="!newCommentText.trim()">发送</button>
			</view>
		</view>
		<!-- 评论区域结束 -->

		<view class="divider-line"></view>
		<!-- 10. 底部操作栏 (悬浮) -->
		<view class="bottom-actions-bar" v-show="userId">
			<view class="action-icon-group">
				<view class="action-icon-item" @click="like()">
					<uni-icons v-show="product.isLikes" type="hand-up-filled" size="22"></uni-icons>
					<uni-icons v-show="!product.isLikes" type="hand-up" size="22"></uni-icons>
					<text class="action-text">表态</text>
				</view>
				<view class="action-icon-item" @click="favorite()">
					<uni-icons v-show="product.isFavorite" type="star-filled" size="22"></uni-icons>
					<uni-icons v-show="!product.isFavorite" type="star" size="22"></uni-icons>
					<text class="action-text">{{ product.favoriteCount }}</text>
				</view>
			</view>
			<!-- {{ product?.seller?.sellerId }} - {{ userId }} -->
			<view class="action-buttons" v-if="userId && ((product?.seller?.sellerId != userId))">
				<button class="chat-btn gradient-border" @click="lyl()">聊一聊</button>
				<button class="buy-now-btn" @click="payment()">立即租用</button>
			</view>
		</view>
		
		<!-- 占位，防止底部内容被悬浮栏遮挡 -->
		<view style="height: 60px;"></view>

	</view>
</template>

<script>
const app = getApp()
export default {
	computed: {
    app() {
      return app
    }
  },
	data() {
		return {
			productId: '',
			product: {
				description: '',
				images: [],
				price: 0,
				isLikes:  false,
				isFavorite: false,
				likeCount: 0,
				favoriteCount: 0,
			},
			comments: [], // 评论列表
			newCommentText: '', // 新评论的文本
			isMe: false,
			userId: undefined,
		}
	},
	async onLoad(e) {
		if(!e.productId){
			// 回到上一页
			uni.navigateBack();
		}
		this.productId = e.productId;
		this.userId = uni.getStorageSync('userInfo')?.userId
		console.log(this.userId)
		await this.productDetail()
		await this.loadComments();
	},
	methods: {
		// 获取商品详情
		productDetail() {
			// this.product = {...this.product, ...uni.getStorageSync('product')}
			this.product.isLikes = app.globalData.Util.ifLikes(this.productId)
			this.product.isFavorite = app.globalData.Util.ifFavorite(this.productId)
			app.globalData.Request.get(app.globalData.ApiConstant.Product.detail + '/' + this.productId,{}).then(res => {
				console.log(res)
				if(res.success){
					this.product = {...this.product, ...res.data}
					this.isMe = (this.product.seller.sellerId === this.userId)
					if(this.product.imageUrls){
						if(!this.product.images){
							this.product.images = []
						}
						this.product.imageUrls.split(',').forEach(item => {
							this.product.images.push(item)
						})
					}
					uni.setStorageSync('product', this.product)
				}
			})
		},
		loadComments() {
			app.globalData.Request.get(app.globalData.ApiConstant.Comments.list,{
				productId: this.productId
			}).then((res) => {
				if(res.success){
					this.comments = res.data.records
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
			// setTimeout(() => {
			// 	const mockComments = [
			// 		{ id: 1, userId: 'user123', username: '热心市民李先生', userAvatar: 'https://randomuser.me/api/portraits/men/32.jpg', content: '这个商品太棒了，物超所值！', createTime: '2024-07-25 10:00:00' },
			// 		{ id: 2, userId: 'user456', username: '小仙女', userAvatar: 'https://randomuser.me/api/portraits/women/44.jpg', content: '卖家服务态度很好，发货也快，赞一个。', createTime: '2024-07-24 15:30:00' },
			// 		{ id: 3, userId: 'user789', username: '匿名用户', userAvatar: '', content: '还可以吧，一般般。', createTime: '2024-07-23 09:12:00' },
			// 	];
			// 	this.comments = mockComments;
			// 	console.log("模拟评论加载完成:", this.comments);
			// }, 500);
		},
		// 新增：提交评论
		submitComment() {
			if (!this.newCommentText.trim()) {
				uni.showToast({ title: '评论内容不能为空', icon: 'none' });
				return;
			}
			if (!this.userId) {
				uni.showToast({ title: '请先登录再评论', icon: 'none' });
				// 可以跳转到登录页
				// wx.reLaunch({ url: '/pages/tb/login' });
				return;
			}

			const userInfo = uni.getStorageSync('userInfo');
			const newComment = {
				// id: Date.now(), // 临时ID，后端会生成
				userId: userInfo.userId,
				productId: this.productId,
				// username: userInfo.name || userInfo.username || '当前用户', // 从userInfo获取用户名或昵称
				// userAvatar: userInfo.avatarUrl || '', // 从userInfo获取头像
				content: this.newCommentText,
				// createTime: new Date().toISOString(), // 客户端生成时间，后端应以服务器时间为准
			};

			console.log("准备提交评论:", newComment);
			
			app.globalData.Request.post(app.globalData.ApiConstant.Comments.add, newComment).then(r => {
				if (r.success) {
					this.newCommentText = '';
					wx.showToast({
						title: '评论成功',
						icon: 'success'
					});
					this.loadComments();
				}else{
					wx.showToast({
						title: r.message,
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.showToast({ title: '评论请求异常', icon: 'none' });
			 });
			// 模拟API请求
			// app.globalData.Request.post(app.globalData.ApiConstant.Product.addComment, newComment)
			//  .then(res => {
			//      if (res.success && res.data) {
			//          // 成功后，理想情况是后端返回新评论对象，或者重新加载评论列表
			//          // this.comments.unshift(res.data); // 将新评论添加到列表顶部
			//          this.comments.unshift(newComment); // 本地模拟添加
			//          this.newCommentText = '';
			//          uni.showToast({ title: '评论成功', icon: 'success' });
			//      } else {
			//          uni.showToast({ title: res.msg || '评论失败', icon: 'none' });
			//      }
			//  })
			//  .catch(err => {
			//      uni.showToast({ title: '评论请求异常', icon: 'none' });
			//  });

			// --- 以下为本地模拟添加 ---
			// this.comments.unshift(newComment); // 将新评论添加到列表顶部
			// this.newCommentText = '';
			// uni.showToast({ title: '评论成功 (模拟)', icon: 'success' });
			// --- 模拟结束 ---

		},

		// 新增：格式化评论时间 (可以根据需要使用更完善的库如dayjs)
		formatCommentTime(timeStr) {
			if (!timeStr) return '';
			const date = new Date(timeStr);
			const now = new Date();
			const diff = now.getTime() - date.getTime();

			const seconds = Math.floor(diff / 1000);
			const minutes = Math.floor(seconds / 60);
			const hours = Math.floor(minutes / 60);
			const days = Math.floor(hours / 24);

			if (days > 0) {
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			} else if (hours > 0) {
				return `${hours}小时前`;
			} else if (minutes > 0) {
				return `${minutes}分钟前`;
			} else {
				return '刚刚';
			}
		},
		previewImage(index){
			let list = []
			this.product.images.forEach((item) => {
				list.push(item)
			})
			uni.previewImage({
				urls: list,
				current: index,
				indicator: this.currentIndicator,
				loop: this.isLoop,
				// #ifdef APP-ANDROID || APP-HARMONY
				longPressActions: (this.isLongPress ? ({
					itemList: ["按钮1", "按钮2", "按钮3"],
					itemColor: "#ccc",
					success: (e) => {
					uni.showToast({
						title: "用户选中了第" + (e.index + 1) + "张图片，并选中了第" + (e.tapIndex + 1) + "个选项",
						position: "bottom"
					})
					},
					fail: (e ) => {
					uni.showToast({
						title: "用户关闭了action sheet",
						position: "bottom"
					})
				}
			}) : null)
			// #endif
			})
		},
		goBack() {
			uni.navigateBack();
		},
		lyl() {
			uni.navigateTo({
				url: '/pages/tb/chat/chat?productId=' + this.productId
			})
		},
		payment(){
			if(!uni.getStorageSync('token')){
				//请登录
				wx.reLaunch({
					url: '/pages/tb/login',
				})
			}else{
				let url = '/pages/tb/chat/chat?productId='+this.productId
				if(this.product.userId === uni.getStorageSync('userInfo').id){
					url += `&chatType=type1`
				}else{
					url += `&chatType=type2`
				}
				uni.navigateTo({
					url: url
				})
			}
		},
		like(){
			//点赞
			app.globalData.Request.post(app.globalData.ApiConstant.Product.like+'/'+this.productId, {}).then(res => {
				this.product.isLikes = !this.product.isLikes
			})
		},
		favorite(){
			//收藏
			app.globalData.Request.post(app.globalData.ApiConstant.Product.favorite+'/'+this.productId, {}).then(res => {
				this.product.isFavorite = !this.product.isFavorite
				if(this.product.isFavorite){
					this.product.favoriteCount = this.product.favoriteCount + 1
				}else{
					this.product.favoriteCount = this.product.favoriteCount - 1
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding: 0 10px;
	box-sizing: border-box;
}

/* 1. 顶部导航栏 */
.top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0; // 上下padding，左右由page-container控制
	background-color: #fff; // 假设顶部条有白色背景
	position: sticky; // 或者 fixed，取决于是否希望它一直固定
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	padding-left: 10px;
	padding-right: 10px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.search-bar-placeholder {
	flex-grow: 1;
	background-color: #f0f0f0;
	border-radius: 15px;
	padding: 5px 10px;
	margin: 0 10px;
	display: flex;
	align-items: center;
	color: #999;
	font-size: 14px;
	text {
		margin-left: 5px;
	}
}
.top-actions {
	display: flex;
	align-items: center;
}
.more-options {
	position: relative;
}
.notification-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: red;
	color: white;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	font-size: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid white;
}

/* 2. 卖家信息 */
.seller-info {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 15px 10px;
	border-radius: 8px;
	// margin-top: 10px;
}
.avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 10px;
}
.seller-details {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.seller-name-tag {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	.name {
		font-weight: bold;
		font-size: 16px;
	}
	.tag-l2 {
		background-color: #409eff; // 类似图片的蓝色
		color: white;
		font-size: 10px;
		padding: 2px 5px;
		border-radius: 3px;
		margin-left: 8px;
	}
}
.last-seen {
	font-size: 12px;
	color: #666;
}
.follow-btn {
	background-color: #fff;
	border: 1px solid #ff5500;
	color: #ff5500;
	border-radius: 15px;
	padding: 0 10px;
	height: 28px;
	line-height: 28px;
	font-size: 13px;
	&::after {
		border: none; // 去除uniapp button默认边框
	}
}

/* 3. 价格和人气 */
.price-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 10px;
	margin-top: 1px; // 与卖家信息紧密相连
}
.price-section {
	display: flex;
	align-items: baseline;
	.price-symbol {
		color: #ff5500;
		font-size: 16px;
		font-weight: bold;
	}
	.price-value {
		color: #ff5500;
		font-size: 24px;
		font-weight: bold;
		margin-left: 2px;
	}
	.shipping-pickup {
		font-size: 12px;
		color: #666;
		margin-left: 8px;
		&.divider {
			padding-left: 8px;
			border-left: 1px solid #ccc;
		}
	}
}
.engagement-stats {
	font-size: 12px;
	color: #999;
}

/* 4. 促销标签 */
.promo-tag {
	background-color: #fff1e6; // 浅橙色背景
	color: #ff5500;
	padding: 8px 10px;
	font-size: 13px;
	border-radius: 5px;
	margin-top: 10px;
	display: inline-block; // 使其宽度自适应内容
}

/* 5. 商品标题和描述 */
.product-title-desc {
	// display: flex;
	background-color: #fff;
	padding: 15px 10px;
	margin-top: 10px;
	border-radius: 8px;
	.title {
		font-size: 18px;
		font-weight: bold;
		display: block;
		margin-bottom: 8px;
	}
	.description {
		font-size: 14px;
		color: #333;
	}
}

/* 6. 商品规格 */
.product-specs {
	display: flex;
	background-color: #fff;
	padding: 10px;
	margin-top: 1px; // 与标题描述紧密相连
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	.spec-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start; // 文本左对齐
		&:first-child {
			padding-right: 10px; // 给中间一些间距
		}
		.spec-label {
			font-size: 13px;
			color: #999;
			margin-bottom: 5px;
		}
		.spec-value {
			font-size: 15px;
			color: #333;
			font-weight: 500;
		}
	}
}

/* 7. 配置选项卡片 */
.config-options-scroll {
	white-space: nowrap; // 关键，让内部元素横向排列
	padding: 15px 0; // 给滚动区域上下一些空间
	margin-top: 10px;
	.config-card {
		display: inline-block; // 关键
		width: 220px; // 卡片宽度
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		margin-right: 10px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.05);
		vertical-align: top; // 保证卡片顶部对齐
		&:first-child {
		    margin-left: 10px; // 给第一个卡片左边距，使其不紧贴屏幕边缘
		}

		.config-header {
			display: flex;
			align-items: center;
			margin-bottom: 8px;
			.config-tag {
				background-color: #e0e0e0; // 灰色背景
				padding: 3px 6px;
				border-radius: 4px;
				font-size: 12px;
				font-weight: bold;
				margin-right: 8px;
			}
			.config-name {
				font-size: 14px;
				font-weight: bold;
				color: #333;
			}
		}
		.config-desc {
			font-size: 11px;
			color: #666;
			display: block;
			white-space: normal; // 允许描述文字换行
			line-height: 1.4;
			margin-bottom: 10px;
			height: 45px; // 固定几行的高度
			overflow: hidden;
		}
		.config-detail-row {
			display: flex;
			justify-content: space-between;
			font-size: 11px;
			color: #555;
			margin-bottom: 4px;
			white-space: normal;
			.detail-label {
				color: #888;
			}
		}
		.config-instance-dropdown {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #f7f7f7;
			padding: 6px 8px;
			border-radius: 4px;
			font-size: 11px;
			color: #333;
			margin-top: 10px;
			margin-bottom: 10px;
			white-space: normal;
		}
		.config-price-buy {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;
			.config-price {
				.price-val-usd {
					font-size: 14px;
					font-weight: bold;
					color: #ff5500;
				}
				.price-unit-usd {
					font-size: 9px;
					color: #999;
					white-space: normal;
					display: block;
					max-width: 120px; // 防止过长
				}
			}
			.buy-config-btn {
				background-color: #fff;
				border: 1px solid #ff5500;
				color: #ff5500;
				border-radius: 15px;
				padding: 0 10px;
				height: 26px;
				line-height: 26px;
				font-size: 12px;
				&::after {
					border: none;
				}
			}
		}
	}
}

/* 8. 担保交易和不喜欢 */
.actions-feedback {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 10px;
	background-color: #f8f8f8; // 和页面背景色一致或略有不同
	.guarantee-trade {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #007aff; // 蓝色，表示信任
		.guarantee-icon {
			border-radius: 50%;
			width: 20px; // 假设图标大小
			height: 20px;
			margin-right: 5px;
		}
	}
	.dislike-btn {
		display: flex;
		align-items: center;
		font-size: 13px;
		color: #999;
		background-color: #eee;
		padding: 5px 10px;
		border-radius: 15px;
		text {
			margin-left: 3px;
		}
	}
}

.divider-line {
    height: 8px;
    background-color: #f0f0f0; // 一条分割线颜色
    margin: 0 -10px; // 扩展到页面边缘
}


/* 9. 附近的电脑服务器 */
.nearby-items-section {
	background-color: #fff;
	padding: 15px 10px;
	margin-top: 10px;
	border-radius: 8px;
	.nearby-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
		.nearby-title {
			font-size: 16px;
			font-weight: bold;
		}
	}
	.nearby-tag {
		background-color: #e0e0e0;
		color: #555;
		font-size: 11px;
		padding: 2px 6px;
		border-radius: 10px;
		display: inline-block;
		margin-bottom: 15px;
	}
	.nearby-items-grid {
		display: flex;
		justify-content: space-between; // 或者 flex-start 然后给item加margin
		.nearby-item {
			width: calc(33.33% - 7px); // 三等分，减去间距
			display: flex;
			flex-direction: column;
			.nearby-item-image {
				width: 100%;
				height: 90px; // 根据图片比例调整
				border-radius: 6px;
				background-color: #eee; // 占位背景
				margin-bottom: 5px;
			}
			.nearby-item-info {
				display: flex;
				flex-direction: column; // 信息垂直排列
				font-size: 12px;
				.nearby-item-distance, .nearby-item-location {
					color: #666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.nearby-item-price {
					font-size: 14px;
					color: #ff5500;
					font-weight: bold;
					margin-top: 3px;
				}
			}
		}
	}
}


/* 10. 底部操作栏 */
.bottom-actions-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
	z-index: 1000;
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	.action-icon-group {
		display: flex;
		align-items: center;
		.action-icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 18px;
			.action-text {
				font-size: 10px;
				color: #666;
				margin-top: 2px;
			}
		}
	}
	.action-buttons {
		display: flex;
		button {
			border-radius: 18px;
			font-size: 14px;
			padding: 0 18px;
			height: 36px;
			line-height: 36px;
			margin-left: 8px;
			&::after {
				border: none;
			}
		}
		.chat-btn {
			background-color: #F7F7F7; // 浅橙色
			// border: 1px solid #F7F7F7;
			font-weight: bold;
			color: black;
		}
		.buy-now-btn {
			background-color: #FFE610; // 主题橙色
			font-weight: bold;
			color: black;
		}
	}
}


.cyber-button {
            position: relative;
            padding: 15px 30px;
            background: transparent;
            color: #0ff;
            border: 2px solid #0ff;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 0;
            text-transform: uppercase;
            letter-spacing: 3px;
            overflow: hidden;
            transition: all 0.3s;
            box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
        }

        .cyber-button:hover {
            background: rgba(0, 255, 255, 0.1);
            box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
            transform: translateY(-5px);
        }

        .cyber-button:active {
            transform: translateY(0);
            box-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
        }

        .cyber-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }

        .cyber-button:hover::before {
            left: 100%;
        }
		
		
.gradient-border {
	border: 3px solid transparent;
	border-radius: 8px;
	background: linear-gradient(white, white) padding-box, linear-gradient(to right, #ff9a9e, #fad0c4) border-box;
}

/* 评论区域样式 */
.comments-section {
	background-color: #fff;
	padding: 20rpx 20rpx 30rpx; // 调整内边距
	margin-top: 20rpx; // 与上方内容间距
	border-radius: 16rpx;

	.comments-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		.section-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		.see-all-comments {
			font-size: 26rpx;
			color: #999;
		}
	}

	.comment-list {
		.comment-item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f5f5f5;
			&:last-child {
				border-bottom: none;
			}

			.comment-avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				flex-shrink: 0;
				background-color: #f0f0f0; // 占位背景
			}

			.comment-content {
				flex-grow: 1;
				.comment-user-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
					.comment-username {
						font-size: 26rpx;
						color: #555;
						font-weight: 500;
					}
					.comment-time {
						font-size: 22rpx;
						color: #999;
					}
				}
				.comment-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
					word-break: break-all; // 长单词或链接换行
				}
			}
		}
	}
	.no-comments {
		text-align: center;
		color: #999;
		font-size: 26rpx;
		padding: 40rpx 0;
	}

	.comment-input-area {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;

		.comment-input {
			flex-grow: 1;
			height: 70rpx;
			background-color: #f7f7f7;
			border-radius: 35rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		.submit-comment-btn {
			background-color: #FFE610; // 主题色
			color: black;
			font-size: 28rpx;
			padding: 0 30rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			flex-shrink: 0; // 防止按钮被压缩
			font-weight: bold;
			&::after {
				border: none;
			}
			&[disabled] {
				background-color: #f0f0f0;
				color: #ccc;
			}
		}
	}
}
</style>